<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            width: 300px;
            height: 50px;
            border: 1px solid #333;
            /* 去除外线 */
            outline: none;
            padding-left: 10px;
        }
    </style>
</head>

<body>
    <input id="user" type="text">
</body>
<script>
    // indexOf(searchStr,startIndex)  
    // lastIndexOf(searchStr,endIndex);
    // includes(searchStr,startIndex)

    // var str = "good good study , day day up";
    // var arr = str.split(" ");
    // var arr = str.split("");
    // console.log(arr);

    // 字符串裁切 
    // slice(startIndex,endIndex)    字符串裁切
    // 返回值: 裁切的新字符串

    var str = "good good study , day day up";
    var result = str.slice(10,15);
    console.log(result);

    var result = str.slice(22,25);
    console.log(result);

    // slice(startIndex,endIndex)  参数可以接受负值(字符串的长度 + 负值)
    var result = str.slice(-6, -3);
    console.log(result);
    console.log(str.length - 6, str.length - 3);


    // substring(startIndex,endIndex)    字符串裁切(用法同slice() 但是参数不能接受负值)
    // 返回值: 裁切的新字符串
    var str = "good good study , day day up";
      var result = str.substring(10,15);
    console.log(result);

    var result = str.substring(22,25);
    console.log(result);


    // substr(startIndex,n)    字符串裁切(自startIndex位置开始,裁切n个元素(n裁切的长度))
    // 返回值: 裁切的新字符串
    var str = "good good study , day day up";
    var result = str.substr(10,5);
    console.log(result);

    var result = str.substr(22,3);
    console.log(result);


    // concat() 字符串拼接(了解)
    // 返回值: 拼接后的新字符串

    // var str = "good" + " " + "good" + " " + "study" + " , " + "day" + " " + "day" + " "+ "up";
    // console.log(str);

    // var str = "good".concat(" ","good"," ","study"," , ","day"," ","day"," ","up");
    // console.log(str);

    // toLowerCase()    字母转小写
    // toUpperCase()    字符转大写

    // 返回:转化后的新字符串

    // var str = "abcdefgABCDEFG0123456789哈哈一";
    // var result = str.toLowerCase();
    // console.log(result);

    // var result = str.toUpperCase();
    // console.log(result);


    // trim()      去除首尾空格
    // trimLeft()  去除头尾空格
    // trimRight()  去除尾部空格
    // 返回值: 去除首尾空格后的新字符串

    // 输入框聚焦状态: 点击输入框,输入框变为可输入状态(出现光标/外线outline)  
    // 输入框失焦状态: 点击输入框意外的位置,输入框从可输入状态变为不可输入状态 => 失焦 


    var userInp = document.getElementById("user");

    // onfocus  输入框聚焦时触发
    userInp.onfocus = function(){
        console.log("聚焦了");
        userInp.style.backgroundColor = "pink";
    }

    // onfocus  输入框失焦时触发
    userInp.onblur = function(){
        console.log("失焦了");
        userInp.style.backgroundColor = "transparent";

        // trim() 演示
        /* var user = userInp.value;
        console.log(1, user);
        
        var result = user.trim();
        // var result = user.trimLeft();
        // var result = user.trimRight();
        console.log(2, result); */

        var user = userInp.value; // 取值
        user = user.trim();  // 去除首尾空格后赋值原值(变量)
        userInp.value = user; // 将去除首尾空格后的值 => 更新到元素中
     
    }






</script>

</html>